import React, { PureComponent } from 'react'
import { bindActionCreators } from 'redux'
import { Input , Button} from 'antd'
import { addSagaListItem } from '../../redux/actions/user'
import {connect} from "react-redux"
import store from '../../redux/store'
let mapDispatchToProps = dispatch => bindActionCreators({addSagaListItem},dispatch)

class InputBox extends PureComponent{
    constructor(props){
        super(props);
    }
    state = {
        inputValue:""
    }
    changeInputValue=(e)=> {
        this.setState({
            inputValue:e.target.value
        })
    }
    clickBtn=()=>{
        const _text = this.state.inputValue;
        this.setState({
            inputValue:""
        },()=>{
            const action = addSagaListItem({title:_text});
            store.dispatch(action);
        })
    }
    render(){
        return (
            <div>
                <Input 
                    placeholder={this.state.inputValue} 
                    style={{ width:'250px', marginRight:'10px'}}
                    onChange={this.changeInputValue}
                    value={this.state.inputValue}
                />
                <Button 
                    type="primary"
                    onClick={this.clickBtn}
                >增加</Button>
            </div>
        )
    }
}

export default connect(void 0,mapDispatchToProps)(InputBox);